<%--
  Created by IntelliJ IDEA.
  User: asd73
  Date: 2017/9/21
  Time: 22:54
  To change this template use File | Settings | File Templates.
  jq控制html的内容
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery.js"></script>
<%--    <style type="text/css">
        div{width: 300px; height: 300px;background: pink;}
    </style>--%>
    <script type="text/javascript">
        $(function (e) {
            $('button').eq(0).click(function (e) {
                $('img').hide(1000);
            });
            $('button').eq(1).click(function (e) {
                $('img').show(1000);
            });
            $('button').eq(2).click(function () {
                $('img').toggle(1000);
            });
            //滑动动画，不加时间参数也可以动画
            $('button').eq(3).click(function (e) {
                $('img').slideUp();
            });
            $('button').eq(4).click(function (e) {
                $('img').slideDown();
            });
            $('button').eq(5).click(function (e) {
                $('img').slideToggle();
            })
        });

    </script>
</head>
<body>
    <button>隐藏</button>
    <button>显示</button>
    <button>切换</button>
    <button>向上隐藏</button>
    <button>向下显示</button>
    <button>上下切换</button>
    <br>

    <img src="../img/pic_7.png" whidth="201" height="91">
</body>
</html>
